<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getTravelNoteList,
  auditTravelNote,
  deleteTravelNote,
  getTravelNoteComments,
  aiAuditTravelNote,
  aiAuditTravelNotesBatch
} from '@/api/travelNote'
import {
  Search,
  Refresh,
  View,
  Delete,
  Check,
  Close,
  ChatDotRound,
  MagicStick,
  Picture
} from '@element-plus/icons-vue'

// 表格数据
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const selectedRows = ref([]) // 选中的行

// 查询参数
const queryParams = ref({
  page: 1,
  pageSize: 10,
  status: '', // 状态筛选：'' 全部，'draft' 草稿，'pending' 审核中，'approved' 已通过，'rejected' 已拒绝
  visibility: '', // 可见性筛选：'' 全部，'public' 公开，'private' 私密
  keyword: '', // 搜索关键词（标题、城市）
  is_featured: '', // 是否精选
  is_top: '' // 是否置顶
})

// 详情对话框
const detailDialogVisible = ref(false)
const currentNote = ref(null)

// 评论对话框
const commentDialogVisible = ref(false)
const commentList = ref([])
const commentLoading = ref(false)

// 审核对话框
const auditDialogVisible = ref(false)
const auditForm = ref({
  id: 0,
  status: 'approved',
  reason: ''
})

// 加载游记列表
const loadTravelNoteList = async () => {
  loading.value = true
  try {
    const result = await getTravelNoteList(queryParams.value)
    if (result.success) {
      tableData.value = result.data.list || []
      total.value = result.data.total || 0
    } else {
      ElMessage.error(result.message || '加载游记列表失败')
    }
  } catch (error) {
    console.error('加载游记列表失败:', error)
    ElMessage.error('加载游记列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  queryParams.value.page = 1
  loadTravelNoteList()
}

// 重置搜索
const handleReset = () => {
  queryParams.value = {
    page: 1,
    pageSize: 10,
    status: '',
    visibility: '',
    keyword: '',
    is_featured: '',
    is_top: ''
  }
  loadTravelNoteList()
}

// 分页变化
const handlePageChange = (page) => {
  queryParams.value.page = page
  loadTravelNoteList()
}

const handleSizeChange = (size) => {
  queryParams.value.pageSize = size
  queryParams.value.page = 1
  loadTravelNoteList()
}

// 查看详情
const handleViewDetail = async (row) => {
  currentNote.value = row
  detailDialogVisible.value = true
}

// 查看评论
const handleViewComments = async (row) => {
  commentLoading.value = true
  commentDialogVisible.value = true
  try {
    const result = await getTravelNoteComments(row.id, {
      page: 1,
      pageSize: 100
    })
    if (result.success) {
      commentList.value = result.data.list || []
    } else {
      ElMessage.error(result.message || '加载评论失败')
    }
  } catch (error) {
    console.error('加载评论失败:', error)
    ElMessage.error('加载评论失败')
  } finally {
    commentLoading.value = false
  }
}

// 打开审核对话框
const handleAudit = (row) => {
  auditForm.value = {
    id: row.id,
    status: 'approved',
    reason: ''
  }
  auditDialogVisible.value = true
}

// 提交审核
const handleSubmitAudit = async () => {
  try {
    const result = await auditTravelNote(
      auditForm.value.id,
      auditForm.value.status,
      auditForm.value.reason
    )
    if (result.success) {
      ElMessage.success('审核成功')
      auditDialogVisible.value = false
      loadTravelNoteList()
    } else {
      ElMessage.error(result.message || '审核失败')
    }
  } catch (error) {
    console.error('审核失败:', error)
    ElMessage.error('审核失败')
  }
}

// 删除游记
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除游记"${row.title}"吗？此操作不可恢复！`,
      '警告',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    )

    const result = await deleteTravelNote(row.id)
    if (result.success) {
      ElMessage.success('删除成功')
      loadTravelNoteList()
    } else {
      ElMessage.error(result.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除游记失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    draft: 'info',
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    draft: '草稿',
    pending: '审核中',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return textMap[status] || '未知'
}

// 获取可见性文本
const getVisibilityText = (visibility) => {
  return visibility === 'public' ? '公开' : '私密'
}

// 截取文本
const truncateText = (text, length = 50) => {
  if (!text) return '-'
  return text.length > length ? text.substring(0, length) + '...' : text
}

// 解析标签
const parseTags = (tags) => {
  if (!tags) return []
  if (typeof tags === 'string') {
    try {
      return JSON.parse(tags)
    } catch (e) {
      return []
    }
  }
  return tags
}

// 选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// AI 审核单个游记
const handleAiAudit = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要使用 AI 智能审核游记"${row.title}"吗？`,
      '确认 AI 审核',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )

    const loadingInstance = ElMessage({
      message: '正在进行 AI 智能审核，请稍候...',
      type: 'info',
      duration: 0,
      iconClass: 'el-icon-loading'
    })

    try {
      const result = await aiAuditTravelNote(row.id)
      loadingInstance.close()

      if (result.success) {
        const { status, reason, details } = result.data

        let detailsHtml =
          '<div style="padding: 0; max-height: 70vh; overflow-y: auto;">'

        // 审核结果头部
        const resultColor = status === 'approved' ? '#67C23A' : '#F56C6C'
        const resultIcon = status === 'approved' ? '✓' : '✕'
        const resultText = status === 'approved' ? '审核通过' : '审核未通过'

        detailsHtml += `
          <div style="background: ${resultColor}; color: white; padding: 24px; text-align: center;">
            <div style="font-size: 56px; margin-bottom: 12px; line-height: 1;">${resultIcon}</div>
            <div style="font-size: 22px; font-weight: bold; letter-spacing: 2px;">${resultText}</div>
          </div>
        `

        // 审核详情
        detailsHtml += '<div style="padding: 24px; background: #f8f9fa;">'

        if (details) {
          const detailItems = [
            { key: 'coverImage', label: '封面图片', icon: '🖼️' },
            { key: 'title', label: '标题', icon: '📝' },
            { key: 'description', label: '简介', icon: '📄' },
            { key: 'content', label: '内容', icon: '📖' }
          ]

          detailItems.forEach(({ key, label, icon }) => {
            if (details[key]) {
              const item = details[key]
              const itemColor = item.passed ? '#67C23A' : '#F56C6C'
              const itemIcon = item.passed ? '✓' : '✕'
              const progressColor =
                item.score >= 90
                  ? '#67C23A'
                  : item.score >= 70
                  ? '#E6A23C'
                  : '#F56C6C'

              detailsHtml += `
                <div style="
                  background: white; 
                  padding: 20px; 
                  margin-bottom: 16px; 
                  border-radius: 12px; 
                  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                  border-left: 4px solid ${itemColor};
                ">
                  <div style="display: flex; align-items: flex-start; margin-bottom: 16px;">
                    <span style="font-size: 32px; margin-right: 16px; line-height: 1;">${icon}</span>
                    <div style="flex: 1; min-width: 0;">
                      <div style="font-weight: 600; color: #303133; font-size: 16px; margin-bottom: 8px;">${label}</div>
                      <div style="color: #606266; font-size: 14px; line-height: 1.6; word-break: break-word;">${item.reason}</div>
                    </div>
                    <div style="
                      width: 40px; 
                      height: 40px; 
                      border-radius: 50%; 
                      background: ${itemColor}; 
                      color: white; 
                      display: flex; 
                      align-items: center; 
                      justify-content: center;
                      font-weight: bold;
                      font-size: 22px;
                      flex-shrink: 0;
                      margin-left: 16px;
                    ">${itemIcon}</div>
                  </div>
                  <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="flex: 1; height: 10px; background: #e4e7ed; border-radius: 5px; overflow: hidden;">
                      <div style="
                        height: 100%; 
                        background: ${progressColor}; 
                        width: ${item.score}%; 
                        transition: width 0.3s ease;
                        border-radius: 5px;
                      "></div>
                    </div>
                    <span style="
                      font-weight: bold; 
                      color: ${progressColor}; 
                      min-width: 50px;
                      font-size: 16px;
                      text-align: right;
                    ">${item.score} 分</span>
                  </div>
                </div>
              `
            }
          })
        }

        detailsHtml += '</div></div>'

        await ElMessageBox.alert(detailsHtml, '', {
          dangerouslyUseHTMLString: true,
          customClass: 'ai-audit-result-dialog',
          showClose: true,
          closeOnClickModal: true,
          closeOnPressEscape: true,
          center: false
        })

        loadTravelNoteList()
      } else {
        ElMessage.error(result.message || 'AI 审核失败')
      }
    } catch (error) {
      loadingInstance.close()
      console.error('AI 审核失败:', error)
      ElMessage.error('AI 审核失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('AI 审核失败:', error)
    }
  }
}

// AI 批量审核
const handleAiBatchAudit = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要审核的游记')
    return
  }

  // 只审核待审核状态的游记
  const pendingNotes = selectedRows.value.filter(
    (row) => row.status === 'pending'
  )
  if (pendingNotes.length === 0) {
    ElMessage.warning('所选游记中没有待审核的游记')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要使用 AI 智能批量审核 ${pendingNotes.length} 篇游记吗？`,
      '确认批量 AI 审核',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )

    const loadingInstance = ElMessage({
      message: `正在批量审核 ${pendingNotes.length} 篇游记，请稍候...`,
      type: 'info',
      duration: 0,
      iconClass: 'el-icon-loading'
    })

    try {
      const ids = pendingNotes.map((note) => note.id)
      const result = await aiAuditTravelNotesBatch(ids)
      loadingInstance.close()

      if (result.success) {
        const { success, failed, details } = result.data

        let detailsHtml =
          '<div style="padding: 0; max-height: 75vh; overflow: hidden; display: flex; flex-direction: column;">'

        // 统计头部
        detailsHtml += `
          <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 28px;">
            <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px; text-align: center;">📊 批量审核完成</div>
            <div style="display: flex; gap: 32px; justify-content: center;">
              <div style="text-align: center; flex: 1; max-width: 120px;">
                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">${success}</div>
                <div style="font-size: 14px; opacity: 0.95;">审核成功</div>
              </div>
              <div style="text-align: center; flex: 1; max-width: 120px;">
                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">${failed}</div>
                <div style="font-size: 14px; opacity: 0.95;">审核失败</div>
              </div>
              <div style="text-align: center; flex: 1; max-width: 120px;">
                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">${
                  success + failed
                }</div>
                <div style="font-size: 14px; opacity: 0.95;">审核总计</div>
              </div>
            </div>
          </div>
        `

        // 详细结果列表
        detailsHtml +=
          '<div style="padding: 24px; background: #f8f9fa; overflow-y: auto; flex: 1;">'

        details.forEach((item, index) => {
          if (item.success) {
            const statusColor =
              item.status === 'approved' ? '#67C23A' : '#F56C6C'
            const statusIcon = item.status === 'approved' ? '✓' : '✕'
            const statusText = item.status === 'approved' ? '通过' : '拒绝'

            detailsHtml += `
              <div style="
                background: white; 
                padding: 18px; 
                margin-bottom: 14px; 
                border-radius: 12px; 
                border-left: 4px solid ${statusColor};
                box-shadow: 0 2px 6px rgba(0,0,0,0.06);
              ">
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px;">
                  <div style="flex: 1; min-width: 0;">
                    <div style="font-weight: 600; color: #303133; font-size: 15px; margin-bottom: 8px;">
                      🎯 游记 #${item.id}
                    </div>
                    <div style="color: #606266; font-size: 13px; line-height: 1.5; word-break: break-word;">${item.reason}</div>
                  </div>
                  <div style="
                    padding: 8px 18px;
                    border-radius: 20px;
                    background: ${statusColor}15;
                    color: ${statusColor};
                    font-weight: bold;
                    font-size: 14px;
                    white-space: nowrap;
                    flex-shrink: 0;
                  ">${statusIcon} ${statusText}</div>
                </div>
              </div>
            `
          } else {
            detailsHtml += `
              <div style="
                background: white; 
                padding: 18px; 
                margin-bottom: 14px; 
                border-radius: 12px; 
                border-left: 4px solid #F56C6C;
                box-shadow: 0 2px 6px rgba(0,0,0,0.06);
              ">
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px;">
                  <div style="flex: 1; min-width: 0;">
                    <div style="font-weight: 600; color: #303133; font-size: 15px; margin-bottom: 8px;">
                      ⚠️ 游记 #${item.id}
                    </div>
                    <div style="color: #F56C6C; font-size: 13px; line-height: 1.5; word-break: break-word;">${item.error}</div>
                  </div>
                  <div style="
                    padding: 8px 18px;
                    border-radius: 20px;
                    background: #F56C6C15;
                    color: #F56C6C;
                    font-weight: bold;
                    font-size: 14px;
                    white-space: nowrap;
                    flex-shrink: 0;
                  ">✕ 失败</div>
                </div>
              </div>
            `
          }
        })

        detailsHtml += '</div></div>'

        await ElMessageBox.alert(detailsHtml, '', {
          dangerouslyUseHTMLString: true,
          customClass: 'ai-audit-result-dialog',
          showClose: true,
          closeOnClickModal: true,
          closeOnPressEscape: true,
          center: false
        })

        loadTravelNoteList()
      } else {
        ElMessage.error(result.message || '批量 AI 审核失败')
      }
    } catch (error) {
      loadingInstance.close()
      console.error('批量 AI 审核失败:', error)
      ElMessage.error('批量 AI 审核失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量 AI 审核失败:', error)
    }
  }
}

onMounted(() => {
  loadTravelNoteList()
})
</script>

<template>
  <div class="travel-note-manage">
    <h2 class="page-title">📖 游记管理</h2>

    <!-- 搜索和筛选 -->
    <el-card class="search-card">
      <el-form :model="queryParams" inline>
        <el-form-item label="审核状态">
          <el-select
            v-model="queryParams.status"
            placeholder="全部"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="草稿" value="draft"></el-option>
            <el-option label="审核中" value="pending"></el-option>
            <el-option label="已通过" value="approved"></el-option>
            <el-option label="已拒绝" value="rejected"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="可见性">
          <el-select
            v-model="queryParams.visibility"
            placeholder="全部"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="公开" value="public"></el-option>
            <el-option label="私密" value="private"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键词">
          <el-input
            v-model="queryParams.keyword"
            placeholder="标题/城市"
            clearable
            style="width: 200px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">
            搜索
          </el-button>
          <el-button :icon="Refresh" @click="handleReset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 游记表格 -->
    <el-card class="table-card">
      <div class="table-toolbar">
        <el-alert
          v-if="selectedRows.length > 0"
          :title="`已选择 ${selectedRows.length} 条记录`"
          type="info"
          :closable="false"
          style="margin-bottom: 16px"
        >
          <template #default>
            <div style="display: flex; align-items: center; gap: 10px">
              <span>已选择 {{ selectedRows.length }} 条记录</span>
              <el-button
                type="primary"
                size="small"
                :icon="MagicStick"
                @click="handleAiBatchAudit"
              >
                AI 批量审核
              </el-button>
            </div>
          </template>
        </el-alert>
      </div>

      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />

        <el-table-column label="封面" width="100">
          <template #default="{ row }">
            <el-image
              v-if="row.cover_image"
              :src="row.cover_image"
              fit="cover"
              style="width: 60px; height: 60px; border-radius: 4px"
              :preview-src-list="[row.cover_image]"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div v-else class="image-slot">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="标题" width="200">
          <template #default="{ row }">
            <div style="font-weight: 500">
              {{ truncateText(row.title, 30) }}
            </div>
            <div style="color: #999; font-size: 12px; margin-top: 4px">
              <el-tag
                v-if="row.is_featured"
                type="danger"
                size="small"
                style="margin-right: 4px"
                >精选</el-tag
              >
              <el-tag v-if="row.is_top" type="warning" size="small"
                >置顶</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="city" label="城市" width="100" />

        <el-table-column label="作者" width="150">
          <template #default="{ row }">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-avatar
                :size="35"
                :src="row.author?.avatar"
                style="flex-shrink: 0"
              >
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <div style="flex: 1; min-width: 0; overflow: hidden">
                <div
                  style="
                    font-size: 13px;
                    font-weight: 500;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ row.author?.nickname || row.author?.username || '-' }}
                </div>
                <div style="color: #999; font-size: 11px">
                  ID: {{ row.user_id }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="visibility" label="可见性" width="90">
          <template #default="{ row }">
            <el-tag
              :type="row.visibility === 'public' ? 'success' : 'info'"
              size="small"
            >
              {{ getVisibilityText(row.visibility) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="统计" width="180">
          <template #default="{ row }">
            <div style="font-size: 12px">
              <div>👁️ 浏览: {{ row.view_count || 0 }}</div>
              <div>
                👍 点赞: {{ row.like_count || 0 }} | 💬 评论:
                {{ row.comment_count || 0 }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="日期" width="140">
          <template #default="{ row }">
            <div style="font-size: 12px">
              <div>{{ formatDate(row.published_at || row.created_at) }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :icon="View"
              @click="handleViewDetail(row)"
            >
              详情
            </el-button>
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        :current-page="queryParams.page"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        background
      />
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="游记详情"
      width="900px"
      top="5vh"
    >
      <div v-if="currentNote" class="note-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="游记ID">{{
            currentNote.id
          }}</el-descriptions-item>
          <el-descriptions-item label="作者">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-avatar :size="30" :src="currentNote.author?.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <span>
                {{
                  currentNote.author?.nickname ||
                  currentNote.author?.username ||
                  '-'
                }}
                (ID: {{ currentNote.user_id }})
              </span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="标题" :span="2">{{
            currentNote.title
          }}</el-descriptions-item>
          <el-descriptions-item label="城市">{{
            currentNote.city
          }}</el-descriptions-item>
          <el-descriptions-item label="旅行日期">
            {{ currentNote.start_date || '-' }} ~
            {{ currentNote.end_date || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentNote.status)">
              {{ getStatusText(currentNote.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可见性">
            <el-tag
              :type="currentNote.visibility === 'public' ? 'success' : 'info'"
            >
              {{ getVisibilityText(currentNote.visibility) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="封面图片" :span="2">
            <el-image
              v-if="currentNote.cover_image"
              :src="currentNote.cover_image"
              fit="contain"
              style="max-width: 400px; max-height: 300px"
              :preview-src-list="[currentNote.cover_image]"
            />
            <span v-else>无封面</span>
          </el-descriptions-item>
          <el-descriptions-item label="简介" :span="2">
            {{ currentNote.description || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="标签" :span="2">
            <el-tag
              v-for="(tag, index) in parseTags(currentNote.tags)"
              :key="index"
              style="margin-right: 8px"
              size="small"
            >
              {{ tag }}
            </el-tag>
            <span v-if="parseTags(currentNote.tags).length === 0">无标签</span>
          </el-descriptions-item>
          <el-descriptions-item label="统计数据" :span="2">
            👁️ 浏览: {{ currentNote.view_count || 0 }} | 👍 点赞:
            {{ currentNote.like_count || 0 }} | ⭐ 收藏:
            {{ currentNote.favorite_count || 0 }} | 💬 评论:
            {{ currentNote.comment_count || 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="特殊标记" :span="2">
            <el-tag
              v-if="currentNote.is_featured"
              type="danger"
              style="margin-right: 8px"
              >精选</el-tag
            >
            <el-tag v-if="currentNote.is_top" type="warning">置顶</el-tag>
            <span v-if="!currentNote.is_featured && !currentNote.is_top"
              >无</span
            >
          </el-descriptions-item>
          <el-descriptions-item label="发布时间" :span="2">
            {{ formatDate(currentNote.published_at) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(currentNote.created_at) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDate(currentNote.updated_at) }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="content-section">
          <h3>游记内容</h3>
          <div class="content-box" v-html="currentNote.content"></div>
        </div>
      </div>
    </el-dialog>

    <!-- 评论对话框 -->
    <el-dialog v-model="commentDialogVisible" title="评论列表" width="700px">
      <el-table :data="commentList" v-loading="commentLoading" border>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column label="用户" width="150">
          <template #default="{ row }">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-avatar :size="30" :src="row.user?.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <span>{{ row.user?.nickname || row.user?.username || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容" />
        <el-table-column label="时间" width="140">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
      </el-table>
      <div v-if="commentList.length === 0" class="empty-comments">暂无评论</div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog v-model="auditDialogVisible" title="审核游记" width="500px">
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="auditForm.status">
            <el-radio label="approved">✅ 通过</el-radio>
            <el-radio label="rejected">❌ 拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拒绝原因" v-if="auditForm.status === 'rejected'">
          <el-input
            v-model="auditForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入拒绝原因（可选）"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitAudit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.travel-note-manage {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 表格卡片 */
.table-card {
  border-radius: 8px;
}

.table-toolbar {
  margin-bottom: 16px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 游记详情 */
.note-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.content-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.content-section h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.content-box {
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.8;
  color: #606266;
}

.empty-comments {
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #f5f7fa;
  color: #909399;
  font-size: 24px;
  border-radius: 4px;
}

/* AI 审核结果对话框样式 */
:deep(.ai-audit-result-dialog) {
  border-radius: 12px;
  overflow: hidden;
  max-width: 680px !important;
  width: 90% !important;
}

:deep(.ai-audit-result-dialog .el-message-box__header) {
  padding: 0;
  border: none;
}

:deep(.ai-audit-result-dialog .el-message-box__content) {
  padding: 0;
}

:deep(.ai-audit-result-dialog .el-message-box__container) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.ai-audit-result-dialog .el-message-box__message) {
  padding: 0;
  margin: 0;
}

:deep(.ai-audit-result-dialog .el-message-box__btns) {
  padding: 16px 24px;
  background: #fff;
  text-align: center;
}

:deep(.ai-audit-result-dialog .el-message-box__btns .el-button) {
  min-width: 100px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .travel-note-manage {
    padding: 10px;
  }
}
</style>
